<template>
  <div class="full-page">
    <van-nav-bar title="上传菜谱" left-arrow @click-left="onClickLeft" fixed />

    <div class="con">
      <UploadImg ref="banner" class="banner">
        <div class="icon">
          <i class="iconfont icon-zhaoxiangji"></i>
          <span>+菜谱封面</span>
        </div>
      </UploadImg>

      <div class="con_wrap">
        <div class="title_wrap van-hairline--bottom">
          <input
            type="text"
            v-model="title"
            placeholder="添加菜谱名称"
            class="title"
          />
        </div>

        <MaterialsUsed
          :conpl="conobj"
          :list="list"
          v-model="con"
          :title="'用料'"
        />

        <Step ref="step" :title="'做法'" class="van-hairline--bottom">
          <div class="icon">
            <i class="iconfont icon-zhaoxiangji"></i>
            <span>+步骤图</span>
          </div>
        </Step>

        <Choice :title="'烹饪时长'" :list="list1" ref="list1" />
        <Choice :title="'烹饪难度'" :list="list2" ref="list2" />

        <!-- <router-link :to="{ name: 'classification' }" class="classification"> -->
        <div class="classification" @click="fenlei = true">
          <h1>推荐类型</h1>
          <p>&gt;</p>
        </div>
        <van-button color="#6670e4" block @click="submit">发布菜谱</van-button>
      </div>
    </div>
    <transition name="van-slide-right">
      <Classification v-if="fenlei" @backs="act"></Classification>
    </transition>
  </div>
</template>

<script>
import UploadImg from "./com/UploadImg.vue";
import MaterialsUsed from "./com/MaterialsUsed.vue";
import Step from "./com/Step.vue";
import Choice from "./com/Choice.vue";
import { NavBar, Button, Dialog, Toast } from "vant";
import { upDataImg, publishMenu, upDataImgs } from "@/api/publish";
import Classification from "./Classification";

export default {
  components: {
    UploadImg,
    MaterialsUsed,
    Step,
    Choice,
    [NavBar.name]: NavBar,
    [Button.name]: Button,
    [Dialog.Component.name]: Dialog.Component,
    Classification,
  },
  data() {
    return {
      fenlei: false,
      //   标题
      title: "",
      //   二级选项
      list: ["鸡蛋", "盐", "白糖", "水", "青椒", "淀粉", "醋", "冰糖", "黄油"],
      //   二级提示
      conobj: {
        title: "填写材料",
        con: "用料单位",
      },
      //   二级输入内容
      con: [
        {
          title: "",
          con: "",
        },
      ],
      list1: ["15分钟左右", "15-30分钟", "30-60分钟", "1小时以上"],
      list2: ["零厨艺", "容易做", "有点挑战", "非常难"],
      fenleiAct: "",
    };
  },
  methods: {
    act(index) {
      this.fenleiAct = index;
      this.fenlei = false;
    },
    // 返回
    onClickLeft() {
      Dialog.confirm({
        title: "确定退出吗",
        message: " 退出将无法保存填写的内容",
      })
        .then(() => {
          history.back();
        })
        .catch(() => {});
    },
    submit() {
      Dialog.confirm({
        title: "确定发布吗",
        message: "芜湖",
      })
        .then(async () => {
          let banner = this.$refs.banner.getAllData();
          if (!banner) {
            Toast("请选择要上传的封面");
            return;
          }
          let step = this.$refs.step.getAllData();
          if (!step) {
            Toast("请填写完整做法步骤");
            return;
          }
          let cookingTime = this.$refs.list1.active();
          let difficulty = this.$refs.list2.active();

          if (this.fenleiAct == "") {
            Toast("请选择分类");
            return;
          }
          let pushTime = new Date().getTime();
          let res = await upDataImg(banner);
          let ress = await upDataImgs(step);
          console.log(ress.data);
          let datas = {
            coverImg: res.data,
            title: this.title,
            material: this.con,
            step: ress.data,
            cookingTime,
            difficulty,
            classList: this.fenleiAct,
            pushTime,
          };
          let { data, error } = await publishMenu(datas);
          if (error) {
            Toast.fail(data.message);
            return;
          }
          Toast.success(data.message);
          history.back();
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.full-page {
  position: absolute;
  background: #fff;
  z-index: 100;
  overflow: hidden;

  .con {
    height: calc(100% - 49px);
    position: absolute;
    top: 49px;
    left: 0;
    overflow-y: auto;

    &::-webkit-scrollbar {
      display: none;
    }
    .con_wrap {
      margin: 0 5vw;
      padding-bottom: 26.6667vw;
      .classification {
        color: #000;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2.6667vw 0;
        margin: 5.3333vw 0;
        h1 {
          font-weight: 800;
        }
      }
      .icon {
        color: #999999;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .icon-zhaoxiangji {
          font-style: normal;
          font-size: 13.3333vw;
        }
      }
    }
    .banner {
      width: 100vw;
      height: 40vw;
      .icon {
        color: #999999;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .icon-zhaoxiangji {
          font-style: normal;
          font-size: 13.3333vw;
        }
      }
    }

    .title_wrap {
      width: 100%;
      height: 25vw;
      display: flex;
      align-items: center;
      justify-content: center;
      .title {
        width: 50vw;
        border: 0;
        font-size: 6.6667vw;
        font-weight: 800;
        outline: none;
        &::placeholder {
          color: #bbbbbb;
        }
      }
    }
  }
}
</style>
